<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-header, .el-footer {
            background-color: #409EFF;
            color: white;
            text-align: center;
            height:auto;
        }

        .el-aside {
            text-align: center;
            overflow: hidden;
        }

        .el-main {
            color: #333;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container style="width:80%;margin:30px auto;">
            <el-aside style="width: 20%">
                <el-menu
                        default-active="1-1"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-submenu index="1" unique-opened="true">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="viewAll">用户列表查看</el-menu-item>
                            <el-menu-item index="1-2" @click="viewOne">用户状态修改</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">用户AAA</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <span slot="title">用户BBB</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">用户CCC</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header><h2>用户管理界面</h2></el-header>
                <!-- 显示内容 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <!-- 组件的template -->
    <template id="viewAll">
        <div class="data">
            <!-- 输入框 -->
            <el-input
                    style="width:50%;margin-bottom: 10px"
                    placeholder="请输入搜索内容"
                    v-model="query"
                    @change="search"
                    clearable>
            </el-input>

            <!-- 数据单向绑定  :data表格数据 -->
            <el-table :data="tableData" border>
                <!-- prop属性  与此处数据的属性一致 -->
                <el-table-column prop="name"   label="姓名" width="120" ></el-table-column>
                <el-table-column prop="age"    label="年龄" width="85" ></el-table-column>
                <el-table-column prop="gender" label="性别" width="85" ></el-table-column>
                <el-table-column prop="birthday" label="生日" width="200" :formatter="formatDate"></el-table-column>
                <el-table-column label="头像" width="300">
                    <template slot-scope="scope">
                        <!-- scope.row 获取每一行的对象信息 User -->
                        <img :src="scope.row.pic" width="80">
                    </template>            
                </el-table-column>
                <el-table-column prop="state" label="状态" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.state==0?'暂未审核':scope.row.state==1?'审核通过':'审核失败' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" icon="el-icon-edit"   circle @click="update(scope.row.id)" ></el-button>
                        <el-button type="danger"  size="small" icon="el-icon-delete" circle @click="del(scope.row.id)" ></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页  :属性="" 单向数据绑定 -->
            <el-pagination
                    :current-page="current"
                    :page-size="limit"
                    :total="total"
                    style="padding:30px 0; margin-top:20px; text-align: center;"
                    layout="prev, pager, next"
                    @current-change="getUserList"
            />
        </div>
    </template>

    <!-- 组件的template -->
    <template id="viewOne">
        <div style="width:50%;margin:10px auto;">
            <h1 align="center">注册界面</h1>

            <el-form ref="form" :model="usermodel" label-width="80px">
                <el-form-item label="编号" hidden="hidden">
                    <el-input v-model="usermodel.id"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input placeholder="请输入姓名" v-model="usermodel.name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="usermodel.gender">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="生日">
                    <el-date-picker
                            v-model="usermodel.birthday"
                            type="date"
                            format="yyyy年MM月dd日"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                            class="upload-demo"
                            action="#"
                            :http-request="handleSuccess"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="update">更新</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </template >

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <!-- 1.引入路由的组件 -->
    <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../js/date.js"></script>
    <script>

        //2.定义Vue组件
        let viewAll  = {
            data: function(){
                return {
                    tableData:[],   //记录表格中所有数据
                    current:0,      //当前页码
                    limit:3,        //每页展示记录数
                    total:0,        //总记录数
                    query:''        //查询条件
                }
            },
            created(){
                this.getUserList()
            },
            methods: {
                search(){
                    this.getUserList()
                },
                //若没有传递当前页码 ， 默认展示第一页
                getUserList(page=1){
                    this.current = page
                    axios.get(`viewAll?current=${this.current}&query=${this.query}`)
                        .then(response=>{  //response.data.data 等价于 Map 有PageInfo&query
                            console.log(response)
                            this.tableData = response.data.data.pageInfo.list
                            this.current = response.data.data.pageInfo.pageNum
                            this.total = response.data.data.pageInfo.total
                            this.query = response.data.data.query
                        })
                        .catch(error=>{
                            console.log(error)
                        })
                },
                update(id){
                    //在地址栏中会显示id编号
                    this.$router.push({path:'/viewOne' , query:{"id":id}})
                },
                del(id){
                    axios.delete(`delete/${id}`)
                        .then(response=>{
                            let code = response.data.code
                            let msg = response.data.msg
                            if(code==200){
                                this.$message({showClose: true,message: msg,type: 'success'});
                                //跳转查询用户列表组件
                                this.getUserList()
                            }else{
                                this.$message({showClose: true,message: msg,type: 'error'});
                            }
                        })
                },
                formatDate(row, column){
                    let data = row[column.property]
                    if(data == null) {
                        return null
                    }
                    let date = new Date(data);
                    var o = {
                        "M+" : date.getMonth()+1,                 //月份
                        "d+" : date.getDate(),                    //日
                        "h+" : date.getHours(),                   //小时
                        "m+" : date.getMinutes(),                 //分
                        "s+" : date.getSeconds(),                 //秒
                        "q+" : Math.floor((date.getMonth()+3)/3), //季度
                        "S"  : date.getMilliseconds()             //毫秒
                    };
                    //var fmt = "yyyy-MM-dd hh:mm:ss";
                    var fmt = "yyyy-MM-dd";
                    if(/(y+)/.test(fmt)) {
                        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
                    }
                    for(var k in o) {
                        if(new RegExp("("+ k +")").test(fmt)){
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                        }
                    }
                    return fmt ;
                }
            },
            template:"#viewAll"
        }

        let viewOne  = {
            data:function(){
                return {
                    usermodel:{
                        id:'',
                        name:'',
                        gender:'',
                        birthday:'',
                        file:''
                    },
                    fileList:[]   //渲染的头像
                }
            },
            created(){
                //获取路由中的id用户编号
                let id = this.$route.query.id
                axios.get(`viewOne/${id}`)
                    .then(response=>{
                        let code = response.data.code
                        let msg = response.data.msg
                        if(code==200){  //response.data.data 等价于 User
                            this.usermodel = response.data.data
                            //渲染用户头像
                            if(this.usermodel.pic){
                                this.fileList.push({url:'http://localhost:8899'+this.usermodel.pic})
                            }
                        }else{
                            this.$message({showClose: true,message: msg,type: 'error'});
                        }
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            },
            methods: {
                handleSuccess(param){
                    //上传的图片信息
                    this.usermodel.file = param.file
                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePreview(file) {
                    console.log(file);
                },
                update(){
                    //收集二进制表单数据
                    let formData = new FormData();
                    //遍历迭代对象中所有的key/value
                    for(let key in this.usermodel){
                        formData.append(key , this.usermodel[key])
                    }
                    //处理事件时间格式
                    this.usermodel.birthday = new Date(this.usermodel.birthday).Format("yyyy-MM-dd")
                    formData.set("birthday" , this.usermodel.birthday)
                    //发起更新的axios请求
                    axios.put('update' , formData)
                        .then(response=>{
                            let code = response.data.code
                            let msg = response.data.msg
                            if(code==200){
                                this.$message({showClose: true,message: msg,type: 'success'});
                                //跳转查询列表的组件
                                this.$router.push({"path":"/viewAll"})
                            }else{
                                this.$message({showClose: true,message: msg,type: 'error'});
                            }
                        })
                        .catch(error=>{
                            console.log(error)
                        })
                },
                back(){
                    this.$router.back()
                }
            },
            template:"#viewOne"
        }

        //3.定义路由
        let rt = new VueRouter({
            routes: [
                {
                    path: "/viewAll",
                    component: viewAll,
                },
                {
                    path: "/viewOne",
                    component: viewOne,
                }
            ]
        });


        new Vue({
            el: '#app',
            router: rt,
            methods: {
                handleOpen(key, keyPath) {
                    console.log(key, keyPath);
                },
                handleClose(key, keyPath) {
                    console.log(key, keyPath);
                },
                viewAll(){
                    //跳转组件
                    this.$router.push({path:'/viewAll'})
                },
                viewOne(){
                    //方式一
                    //传递参数 this.$router.push({path: '路由', query:{key: value}})   使用这种方式，传递参数会拼接在路由后面，出现在地址栏
                    //参数取值 this.$route.query.key
                    this.$router.push({path:'/viewOne'})
                    //方式二
                    //传递参数 this.$router.push({name: '路由的name', params:{key: value}}) 使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数
                    //参数取值 this.$route.params.key
                }
            }
        })
    </script>
</body>

</html>